import "https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"


let sid = location.search.substring(1).split("=")[1]
if (!sid) {
    sid = "1"
}

function goodDetail() {
    $.ajax({
        type: "get",
        url: "http://10.31.155.75/mogujie/php/detail.php",
        data: {
            sid: sid
        },
        dataType: "json"
    }).done(function(res) {
        const wrap = $(".wrap") // 装小图的盒子
        const spic = $("#spic") // 小图
        const sf = $("#sf") // 小放大镜
        const bpic = $("#bpic") //大图
        const bf = $("#bf") // 大放大镜
        const title = $(".good_title") // 商品标题信息
        const price = $(".good_price") // 商品价格
        const salenum = $(".salesnum") // 商品销售量
        const evaluate = $(".evaluate") // 商品评价数量

        // 动态渲染数据
        spic.find("img").attr("src", res.url)
        bpic.attr("src", res.url)
        title.html(res.title)
        let goodPrice = "￥" + res.price
        price.html(goodPrice)
        salenum.html(res.salenumber)

        // 动态渲染小放大镜下面的小图列表
        const picList = $("#list ul")
        if (res.spurl) {
            let picArr = res.spurl.split(",") // 获取图片的地址，将字符串地址转换成数组项形式
            let str = ""
            $.each(picArr, function(index, value) {
                str += `
                <li><img src="${value}"></li>
            `
            })
            picList.html(str)
        }

        // 切换下面的小图，将下面图片地址赋值给上面的小图和大图
        const picli = $("#list ul li")
        picli.eq(0).addClass("active")
        picli.on("mouseover", function() {
            picli.removeClass("active")
            $(this).addClass("active")
            let oUrl = $(this).find("img").attr("src")
            $("#spic").find("img").attr("src", oUrl)
            $("#bpic").attr("src", oUrl)
        })

        const leftarrow = $("#left")
        const rightarrow = $("#right")
        const ulList = $("#list ul")
        let num = 5 // 下面一行能显示的小图个数为5个
        if (picli.length <= num) {
            rightarrow.css("visibility", "hidden")
            leftarrow.css("visibility", "hidden")
        } else {
            rightarrow.css("visibility", "visible")
            leftarrow.css("visibility", "hidden")
        }

        let liwidth = picli.eq(1).outerWidth(true) // outerWidth(true)获取包括外边距的盒模型宽度大小

        rightarrow.on("click", function() {
            if (picli.length > num) {
                num++
                leftarrow.css("visibility", "visible")
                if (num === picli.length) {
                    rightarrow.css("visibility", "hidden")
                }
                ulList.stop().animate({
                    left: -liwidth * (num - 5)
                })
            }
        })
        leftarrow.on("click", function() {
            if (num > 0) {
                num--
                rightarrow.css("visibility", "visible")
                if (num === 5) {
                    leftarrow.css("visibility", "hidden")
                }
                ulList.animate({
                    left: -liwidth * (num - 5)
                })
            }
        })

        function randomNum(a, b) {
            return Math.round(Math.random() * (b - a)) + a
        }
        let rannum = randomNum(200, 1000) // 采用随机数形式获取评论数
        evaluate.html(rannum)

        // 鼠标移入小图当中触发事件
        spic.hover(function() {
            sf.css("visibility", "visible") // 小放大镜的显示
            bf.css("visibility", "visible") // 大放大镜的显示

            // 计算小放大镜的大小，根据公式 小放/大放 = 小图/大图
            sf.css({
                width: bf.outerWidth() * spic.outerWidth() / bpic.outerWidth(),
                height: bf.outerHeight() * spic.outerHeight() / bpic.outerHeight()
            })
            let radio = bpic.outerWidth() / spic.outerWidth() // 计算放大比例

            // 鼠标小图移动，小放大镜跟随鼠标一起移动
            spic.on("mousemove", function(ev) {
                // ev.pageX: 鼠标相对于文档的左边缘的位置
                let l = ev.pageX - spic.offset().left - sf.outerWidth() / 2
                let t = ev.pageY - spic.offset().top - sf.outerHeight() / 2
                if (l <= 0) {
                    l = 0
                } else if (l >= spic.outerWidth() - sf.outerWidth()) {
                    l = spic.outerWidth() - sf.outerWidth()
                }
                if (t <= 0) {
                    t = 0
                } else if (t >= spic.outerHeight() - sf.outerHeight()) {
                    t = spic.outerHeight() - sf.outerHeight()
                }
                sf.css({
                    left: l,
                    top: t
                })
                bpic.css({
                    left: -l * radio,
                    top: -t * radio
                })
            })

        }, function() {
            sf.css("visibility", "hidden") // 小放大镜的隐藏
            bf.css("visibility", "hidden") // 大放大镜的隐藏
        })

    })
}

function localdata() {
    const addcart = $(".car_btn") // 加入购物车按钮
    let arrsid = [] // 存储商品加入购物车sid的数组
    let arrnum = [] // 存储商品加入购物车数量的数组

    let addnum = $(".num_add") // 添加商品数量按钮
    let reducenum = $(".num_reduce") // 减少商品数量按钮
    addnum.on("click", function() {
        let num = parseInt($(".number input").val()) + 1
        $(".number input").val(num)
    })

    reducenum.on("click", function() {
        let num = parseInt($(".number input").val()) - 1
        if (num < 1) {
            num = 1
        }
        $(".number input").val(num)
    })

    let iptnum = $(".number input")
    iptnum.on("input", function() {
        const reg = /^[1-9]\d*$/
        if (!reg.test(iptnum.val())) {
            iptnum.val("1")
        }
    })

    // 判断本地存储是否存在数据
    function isExist() {
        if (localStorage.getItem("localsid") && localStorage.getItem("localnum")) {
            arrsid = localStorage.getItem("localsid").split(",")
            arrnum = localStorage.getItem("localnum").split(",")
        } else {
            arrsid = []
            arrnum = []
        }
    }

    addcart.on("click", function() {
        isExist()
        let iptValue = parseInt($(".number input").val()) // 表单中输入的商品数量值

        // 判断是第一次点击加入还是多次点击加入购物车
        if (arrsid.includes(sid)) { // 点击多次的情况
            let index = arrsid.indexOf(sid) // 获取重复点击商品的sid在数组中的索引位置
            let num = parseInt(arrnum[index]) + iptValue // 重复点击后最终商品的总数量
            arrnum[index] = num // 给当前项商品购买数量重新赋值
            localStorage.setItem("localnum", arrnum)
        } else { // 第一次点击
            arrsid.push(sid) // 将第一次点击的sid值先存入数组中
            arrnum.push(iptValue) // 将表单输入的值存入数量数组中
            localStorage.setItem("localsid", arrsid) // 存储到本地存储中
            localStorage.setItem("localnum", arrnum)
        }
    })
}


function buyNow() {
    const nowbuy = $(".buy_btn")
    console.log(nowbuy)
    nowbuy.on("click", function() {
        if (localStorage.getItem("username")) {
            $(this).attr("href", "cartlist.html")
        } else {
            if (window.confirm("您还未进行登录，确认进入登录界面吗?")) {
                $(this).attr("href", "login.html")
            } else {
                $(this).attr("href", "javascript:;")
            }
        }
    })
}

export {
    goodDetail,
    buyNow,
    localdata
}